import gold from "../../../../imgs/gold.png";
import sellerbg from "../../../../imgs/sellerbg.png";
import rjoneyear from "../../../../imgs/rjoneyear.png";
import zzrenzheng from "../../../../imgs/zzrenzheng.png";
import qqwhite from "../../../../imgs/qq-white.png";
import icon_promise from "../../../../imgs/icon_promise.png";
import Rate from "@ui/RJMart/rate";
import HttpUtils from "../../common/utils/HttpUtils";
import InfoModal from "@page/common/modal/InfoModal";
import CarouselModal from "@page/common/modal/CarouselModal";
import urlHook from "pages/ruijing/common/utils/urlHook";
import ZenModal from "@module/../components/ZenUI/ZenModal/ZenModal";
import CommonUtils from "@page/common/utils/CommonUtils";
import ic_supp from "@assets/ic_supp.png";
import ZenSlider from "@root/components/ZenUI/ZenSlider/ZenSlider";

export default class TopRight extends React.Component {
    constructor() {
        super();
        this.state = {
            supplier: null,
            isInteresting: false
        };
    }

    componentDidMount() {
        this.getSupplierInfo();
        this.isInterestSupplier();
    }

    getSupplierInfo() {
        const { suppId, product } = this.props;
        let brandId = "";
        if (product) {
            brandId = product.brandId;
        }

        HttpUtils.getSupplierInfo(brandId, suppId)
            .then(res => {
                console.log(res);
                if (res.code == "0000") {
                    this.setState(
                        {
                            supplier: res.supplier
                        },
                        this.hasSignAgreemenet
                    );
                }
            })
            .catch(err => {
                console.log(err);
            });
    }

    //关注商家
    interestSupplier() {
        let url = `/store/api/user/buyer/updateInterestSupplier`;
        const { suppId } = this.props;
        let params = {
            supplierId: suppId,
            isInteresting: !this.state.isInteresting
        };
        REST.post(url, params).then(
            data => {
                this.setState(
                    { isInteresting: params.isInteresting }
                    // this.infoModal.showModal()
                );
            },
            error => {}
        );
    }

    // 是否关注商家
    isInterestSupplier() {
        let url = `/store/api/user/buyer/isInterestSupplier`;
        const { suppId } = this.props;
        REST.post(url, { supplierId: suppId }).then(
            data => {
                this.setState({ isInteresting: data.isInteresting });
            },
            error => {}
        );
    }

    //是否实价
    hasSignAgreemenet() {
        let url = `/suppliers/provider/store/supplier/hasSignAgreemenet`;
        const { suppId } = this.props;
        const { supplier } = this.state;
        const { shopAgreement } = supplier || {};
        REST.post(url, { suppId: suppId, agreementid: shopAgreement }).then(
            res => {
                if (res.data == 1) {
                    this.setState({ hasSignAgreemenet: true });
                }
            },
            error => {}
        );
    }

    mobileArr(mobile) {
        if (mobile) {
            let arr = mobile.split(";");
            return arr;
        }
        return [];
    }

    showModal(licenseUrl) {
        let _self = this;
        let imgList = [licenseUrl];
        Uts.mergeArray(
            imgList,
            Uts.fetchObjectArrayToStringArray(
                _self.state.supplier.brandAuth.brand,
                "url"
            )
        );
        function closeModal(value) {
            console.log("run closeModal", value);
            modal.hide();
        }

        function Content(props) {
            console.log(props)
            props.item.passParams && props.item.passParams("abc");
            return <ZenSlider callbackList={[closeModal]} imgList={imgList} />;
        }

        function modalHeader() {
            if (!_self.state.supplier.tSuppCreditDTO) {
                return null;
            }
            return (
                <div>
                    <div>已通过企业的真实性认证，可保障用户的合法权益。</div>
                    <div>
                        最新认证时间：
                        {Filter.cutString(_self.state.supplier.authTime, 10)}
                    </div>
                </div>
            );
        }

        let options = {
            header: modalHeader,
            modalClass: "zen_bdr-5 r-img-viewer",
            // footer: "test footer",
            content: Content,
            size: "large",
            //cbList: [closeModal],
            close: closeModal,
            hideFooter: true,
            // hideHeader: true,
            closeByBackDrop: true,
            withoutShadow: true,
            backDropClass: "back-drop-8"
        };
        let modal = ZenModal.loadModal(options);
        modal.show();
    }

    render() {
        const { supplier, isInteresting, hasSignAgreemenet } = this.state;
        if (!supplier) {
            return null;
        }
        const { suppId, inSupp } = this.props;
        const {
            name,
            mobile,
            qq,
            address,
            telephone,
            saleAmount,
            province,
            city,
            county,
            enter,
            tSuppCreditDTO,
            salesManList,
            licenseUrl
        } = supplier;
        const mobileArr = this.mobileArr(mobile);
        return (
            <div style={{ display: "inline-block" }}>
                <div className={"detail-top-right"}>
                    <div className={"detail-top-seller"}>
                        <img src={sellerbg} alt="" />
                    </div>
                    <div className={"detail-top-seller-content"}>
                        <div className={"detail-top-right-jianjie"}>
                            <div className={"detail-top-right-jianjie-name"}>
                                <p dangerouslySetInnerHTML={{ __html: name }} />
                            </div>
                            {enter ? (
                                <div className={"detail-top-jianjie-renzheng"}>
                                    <img src={ic_supp} />
                                    <p>已入驻供应商</p>
                                </div>
                            ) : (
                                global.hasLogin&&
                                (
                                    <div className={"detail-top-jianjie-renzheng"}>
                                        <img src={ic_supp} alt="" />
                                        <p>未入驻供应商</p>
                                    </div>
                                )
                            )}
                            <div className={"detail-top-jianjie-renzheng1"}>
                                <img src={zzrenzheng} alt="" />
                                <p
                                    onClick={() => {
                                        this.showModal(licenseUrl);
                                    }}
                                    style={{
                                        color: "#0093eb",
                                        cursor: "pointer"
                                    }}
                                >
                                    资质认证企业
                                </p>
                                {hasSignAgreemenet && (
                                    <img
                                        onClick={() => {
                                            window.open(
                                                urlHook.helpForTurePrice
                                            );
                                        }}
                                        src={icon_promise}
                                        style={{
                                            width: 30,
                                            height: 30,
                                            marginTop: -6,
                                            marginLeft: 5,
                                            cursor: "pointer"
                                        }}
                                        alt=""
                                    />
                                )}
                            </div>
                        </div>

                        <div className={"detail-top-right-xingyong"}>
                            <div className={"detail-top-right-xingyong-item"}>
                                <p
                                    className={
                                        "detail-top-right-xingyong-item-p"
                                    }
                                >
                                    客服电话：
                                </p>
                                <p
                                    className={
                                        "detail-top-right-xingyong-item-p1"
                                    }
                                >
                                    {telephone || "无"}
                                </p>
                            </div>
                            <div className={"detail-top-right-xingyong-item"}>
                                <p
                                    className={
                                        "detail-top-right-xingyong-item-phone"
                                    }
                                >
                                    手机：
                                </p>
                                {this.renderMobile(mobileArr, salesManList)}
                            </div>
                            {(province || city || county || address) && (
                                <div
                                    className={"detail-top-right-xingyong-item"}
                                >
                                    <p
                                        className={
                                            "detail-top-right-xingyong-item-dizhi"
                                        }
                                    >
                                        地区：
                                    </p>
                                    <p
                                        className={
                                            "detail-top-right-xingyong-item-dizhi1"
                                        }
                                    >{`${province || ""} ${city ||
                                        ""} ${county || ""}`}</p>
                                </div>
                            )}

                            <div className={"detail-top-right-xingyong-item"}>
                                <p
                                    className={
                                        "detail-top-right-xingyong-item-p"
                                    }
                                >
                                    累计订单量：
                                </p>
                                <p
                                    className={
                                        "detail-top-right-xingyong-item-p2"
                                    }
                                >
                                    {saleAmount}
                                </p>
                            </div>
                            {this.renderQQ(salesManList, qq)}
                        </div>
                        {!inSupp && (
                            <div className={"detail-top-right-btns"}>
                                <div
                                    onClick={() => {
                                        $state.go({
                                            stateName: "/supplierShop",
                                            params: {
                                                suppId: suppId
                                            }
                                        });
                                    }}
                                    className={"detail-top-right-btn"}
                                >
                                    <p>进入店铺</p>
                                </div>
                                {global.hasLogin && (
                                    <div
                                        onClick={() => this.interestSupplier()}
                                        className={"detail-top-right-btn"}
                                    >
                                        <p>
                                            {isInteresting
                                                ? "取消关注"
                                                : "关注商家"}
                                        </p>
                                    </div>
                                )}
                            </div>
                        )}
                    </div>
                    <InfoModal
                        content={isInteresting ? "关注商家成功" : "已取消关注"}
                        getRef={v => (this.infoModal = v)}
                    />
                    <CarouselModal getRef={v => (this.carouselModal = v)} />
                </div>
            </div>
        );
    }

    renderMobile(mobileArr, salesManList) {
        if (salesManList && salesManList.length > 0) {
            let _salesManList = salesManList;
            if (salesManList.length > 3) {
                _salesManList = CommonUtils.getRandomArray(salesManList, 3);
            }
            return (
                <div>
                    {_salesManList &&
                        _salesManList.map((item, index) => (
                            <p
                                key={index}
                                className={
                                    "detail-top-right-xingyong-item-dizhi1"
                                }
                            >
                                {`${item.mobile} (${item.userName})`}
                            </p>
                        ))}
                </div>
            );
        } else {
            return (
                <div>
                    {mobileArr.map((item, index) => (
                        <p
                            key={index}
                            className={"detail-top-right-xingyong-item-dizhi1"}
                        >
                            {item}
                        </p>
                    ))}
                </div>
            );
        }
    }

    fliterQQnull(salesManList) {
        let _salesManList = salesManList.filter((item, index) => {
            return item.qq != "" && item.userAlias != "";
        });
        return _salesManList;
    }

    renderQQ(salesManList, qq) {
        if (!global.hasLogin) {
            return this.renderDefaultQQ(qq);
        }

        if (salesManList && salesManList.length > 0) {
            let salesManList_ = this.fliterQQnull(salesManList);
            if(salesManList_&&salesManList_.length==0){
                return this.renderDefaultQQ(qq);
            }
            let _salesManList = salesManList_;
            if (salesManList_&&salesManList_.length > 3) {
                _salesManList = CommonUtils.getRandomArray(salesManList_, 3);
            }
            return (
                <div className={"detail-top-right-xingyong-item"}>
                    <p className={"detail-top-right-xingyong-item-p"}>联系：</p>
                    <div style={{ display: "flex", flexWrap: "wrap" }}>
                        {_salesManList &&
                            _salesManList.map((item, index) => {
                                if (item.qq) {
                                    return (
                                        <a
                                            key={index}
                                            className={
                                                "detail-top-right-lianxi"
                                            }
                                            href={`tencent://message/?uin=${
                                                item.qq
                                            }&Site=%E5%9C%A8%E7%BA%BFQQ&Menu=yes`}
                                        >
                                            <img src={qqwhite} alt="" />
                                            <p>{item.userAlias}</p>
                                        </a>
                                    );
                                }
                                return null;
                            })}
                    </div>
                </div>
            );
        }

        return this.renderDefaultQQ(qq);
    }

    renderDefaultQQ(qq){
        if(qq){
            return (
                <div className={"detail-top-right-xingyong-item"}>
                    <p className={"detail-top-right-xingyong-item-p"}>联系：</p>
                    <a
                        className={"detail-top-right-lianxi"}
                        href={`tencent://message/?uin=${qq}&Site=%E5%9C%A8%E7%BA%BFQQ&Menu=yes`}
                    >
                        <img src={qqwhite} alt="" />
                        <p>商家客服</p>
                    </a>
                </div>
            );
        }
        return  null;
    }

}


